<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10" style="margin-top: 50px;">
          <chinaMap style="width: 700px; height: 350px;"></chinaMap>
        </el-col>
        <div style="width: 40px;"></div>
        <el-col :span="10">
          <div id="brokenLine" style="height: 500px; width: 1000px;"></div>
        </el-col>
      </el-row>
    </el-card>
    <div style="height: 20px;"></div>
    <el-card>
      <el-row :gutter="21">
        <el-col :span="7">
          <div id="bar" style="height: 400px; width: 500px;"></div>
        </el-col>
        <div style="width: 40px;"></div>
        <el-col :span="7">
          <div id="pie" style="height: 400px; width: 500px;"></div>
        </el-col>
        <el-col :span="7">
          <div id="radar" style="height: 400px; width: 500px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getindexsApi } from '@/api/dashboard.js';
import chinaMap from '@/components/map';
import * as echarts from 'echarts';

// ======== 
// 数据
const defaultData = {
  week: [],
  sidebar: []
}
const brokData = ref({ ...defaultData })
// 获取数据
const initData = async () => {
  let res = await getindexsApi()
  console.log(res);
  brokData.value = res.data.data
}
// 线图
const brokenLine = async () => {
  var chartDom = document.getElementById('brokenLine');
  var myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: "投诉处理",
      left: "center",

      textStyle: {
        fontSize: 30
      },
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line'
      }
    ]
  };
  option.xAxis.data = brokData.value.map(item => item.name)
  option.series[0].data = brokData.value.map(item => item.value)
  option && myChart.setOption(option);
}
// 柱图
const bar = () => {
  var chartDom = document.getElementById('bar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "广告管理",
      left: "center",

      textStyle: {
        fontSize: 30
      },
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  };
  option.xAxis.data = brokData.value.map(item => item.name)
  option.series[0].data = brokData.value.map(item => item.value)
  option && myChart.setOption(option);

}
// 饼图
const pie = () => {

  var chartDom = document.getElementById('pie');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '活动管理',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },

    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option.series[0].data = brokData.value
  option && myChart.setOption(option);
}
// 雷达图
const redar = () => {
  var chartDom = document.getElementById('radar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '文章分类',
      left: 'center'
    },

    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Sales', max: 1000 },
        { name: 'Administration', max: 1000 },
        { name: 'Information Technology', max: 1000 },
        { name: 'Customer Support', max: 1000 },
        { name: 'Development', max: 1000 },
        { name: 'Marketing', max: 1000 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [],
            name: 'Allocated'
          },
        ]
      }
    ]
  };

  option.series[0].data[0] = brokData.value.map(item => item.value)
  option.series[0].data[1] = brokData.value.map(item => item.value1)
  const indicatorList = brokData.value.map(item => {
    return {
      name: item.name,
      max: 1000
    }
  })
  option.radar.indicator = indicatorList
  option && myChart.setOption(option);
}







onMounted(async () => {
  initData()
  setTimeout(() => {
    bar()
    brokenLine()
    pie()
    redar()
    chinaMap()
  }, 300)
})
</script>

<style scoped></style>
